<template>
  <div class="search">
    <div class="search-box">
      <img src="" alt="">
      <input type="text" placeholder="搜索歌曲、歌手、专辑" v-model="keywords" v-throttle="search">
    </div>
    <div class="search-suggest"  v-show="keywords != ''">
      <ScrollView>
        <ul>
          <li v-for="value in songs" :key="value.id" @click.stop="selectMusic(value.id)">
            <img src="" alt="">
            <p>{{value.name}} - {{value.artists[0].name}}</p>
          </li>
        </ul>
      </ScrollView>
    </div>
    <div class="search-hot">
      <h3>热门搜索</h3>
      <ul>
        <li v-for="value in hots" :key="value.first" @click.stop="selectedHot(value.first)">{{value.first}}</li>
      </ul>
    </div>
    <ul class="search-history">
      <li v-for="value in searchHistory" :key="value">
        <div class="history-left">
          <img src="" alt="">
          <p>{{value}}</p>
        </div>
        <div class="history-right">
          <img src="" alt="">
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import ScrollView from '../components/ScrollView.vue';
import {getSearchList,getSearchHot} from '../api/index.js';
import {mapActions} from 'vuex'
import { setLocalStorage, getLocalStorage } from '../tools/tools'
import MetaInfo from '../../vue-meta-info'

export default {
  name:"Search",
  metaInfo: MetaInfo.search,
  components:{
    ScrollView
  },
  data(){
    return{
      keywords: '',
      songs:[],
      hots:[],
      searchHistory:[]
    }
  },
  methods:{
    ...mapActions([
      'setFullScreen',
      'setSongDetail'
    ]),
    search () {
      if (this.keywords === '') {
        return
      }
      getSearchList({ 'keywords': this.keywords })
        .then((data) => {
          //console.log(data)
          this.songs = data.result.songs
        })
        .catch(function (err) {
          console.log(err)
        })
    },
    selectMusic(id){
      this.setFullScreen(true)
      this.setSongDetail([id])
      if(this.searchHistory.includes(this.keywords)){
        return
      }
      this.searchHistory.push(this.keywords)
      setLocalStorage('searchHistory',this.searchHistory)
      this.keywords = ''
    },
    selectedHot (name) {
      this.keywords = name
      this.search()
    },
  },
  directives: {
    throttle: {
      //通过自定义指令实现函数节流  
      inserted: function (el, obj) {
        let timerId = null
        let flag = true
        el.addEventListener('input', function () {
          if (!flag) return
          flag = false
          timerId && clearTimeout(timerId)
          timerId = setTimeout(function () {
            flag = true
            obj.value()
          }, 1000)
        })
      }
    }
  },
  created () {
    getSearchHot()
      .then(data=>{
        this.hots = data.result.hots
      })
      .catch(err=>{
        console.log(err);
      })
    if (getLocalStorage('searchHistory') === undefined || getLocalStorage('searchHistory') === null) {
      return
    }
    this.searchHistory = getLocalStorage('searchHistory')
  }
}
</script>

<style scoped lang="scss"> 
@import '../assets/css/mixin.scss';
@import '../assets/css/variable.scss';
.search{
  position: fixed;
  left: 0;
  right: 0;
  top: 184px;
  bottom: 0;
  @include bg_sub_color();
  .search-box{
    display: flex;
    align-items: center;      
    margin: 40px 20px;
      background: #ebecec;
      border-radius: 30px;
      border-bottom: 1px solid #ccc;
    img{
      width: 40px;
      height: 40px;
      margin-left: 20px;
    }
    input{
      border: none;
      outline: none;
      background: transparent;
      @include font_size($font_medium);
      height: 60px;
      line-height: 60px;
      margin-left: 20px;
    }
  }
  .search-suggest{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 300px;
    overflow: hidden;
    @include bg_sub_color();
    li{
      display: flex;
      align-items: center;
      padding: 20px 40px;
        box-sizing: border-box;
        border-bottom: 1px solid #ccc;;
      img{
        width: 40px;
        height: 40px;
      }
      p{
        margin-left: 20px;
        @include font_color();
        @include font_size($font_medium);
      }
    }
  }
  .search-hot{
    h3{
      @include font_color();
      @include font_size($font_medium);
      padding: 10px 20px;
    }
    ul{
      display: flex;
      flex-wrap: wrap;
      li{
        height: 60px;
        line-height: 60px;
        border: 1px solid #000;
        border-radius: 30px;
        padding: 0 20px;
        @include font_color();
        @include font_size($font_medium_s);
        margin: 10px 20px;
      }
    }
  }
  .search-history{
      margin-top: 20px;
    li{      
      padding: 20px 20px;
      box-sizing: border-box;
      display: flex;  
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
      .history-left{
        display: flex;
        align-items: center;
        img{
          width: 40px;
          height: 40px;
        }
        p{
          margin-left: 20px;
          @include font_size($font_medium_s);
          @include font_color()
        }
      }
      .history-right{
        img{
          width: 30px;
          height: 30px;
        }
      }
    }
  }
}
</style>